import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet, Image, LogBox } from 'react-native';
import { joke } from '@/api';

import UseFlatList from '@/components/flatList';
import Opacity from '@/components/opacity';
import msg from '@/components/toast';

const Cat = () => {
	const [data, setData] = useState([]);
	const [pages, setPages] = useState({
		page: 1,
		count: 10,
	});
	useEffect(() => {
		getData(pages);
	}, [pages]);

	const getData = async (pages) => {
		const key = msg.tipLoad();
		const res = await joke('https://api.apiopen.top/getJoke', pages);
		msg.tipLoadClose(key);
		setData(res.result);
	};

	const renderItemList = ({ item }) => {
		return (
			<Opacity
				onPress={() => {
					console.log(111);
				}}
			>
				<View style={styles.item}>
					<View style={styles.image}>
						<Image style={{ width: 60, height: 60 }} source={{ uri: item.thumbnail }} />
					</View>
					<View style={styles.text}>
						<Text style={styles.title}>{item.name}</Text>
					</View>
				</View>
			</Opacity>
		);
	};

	// const _getPageData = () => {
	// 	getData(pages);
	// };

	return (
		<View style={{ ...boxCenter }}>
			<UseFlatList
				data={data}
				renderItem={renderItemList}
				// onEndReached={_getPageData}
			/>
		</View>
	);
};
const styles = StyleSheet.create({
	item: {
		marginTop: 10,
		marginLeft: 10,
		marginRight: 10,
		flexDirection: 'row',
		alignItems: 'center',
	},
	image: {
		width: 60,
		height: 60,
	},
	text: {
		flex: 1,
	},
	title: {
		fontSize: 14,
	},
});
export default Cat;
